<template>
    <div>
        <div class="block">
            <span class="demonstration">时间范围</span>
            <el-date-picker
                    v-model="MonthForm"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy 年 MM 月"
                    value-format="yyyy-MM-dd"
                    style="margin-bottom: 20px"
            ></el-date-picker>
            <el-select v-model="selectedStaffId" filterable placeholder="请选择">
                <el-option
                        v-for="item in staffData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="primary" class="el_btn" @click="clickSearch">查询</el-button>
        </div>
        <!-- 数据图 -->

        <div class="bgff">
            <div ref="chart" style="width:70%;height:350px" id="chart_div"></div>
        </div>
        <p v-if="presence_times!==''">缺勤次数：{{presence_times}}</p>
    </div>
</template>

<script>
    import {dateFormat} from '@/util/util'
    export default {
        data() {
            return {
                staffData:[],
                selectedStaffId:'',
                selectedStaffName:{
                    name:'电影'
                },
                MonthForm: [], //当前选择时间
                sechart:null,
                presence_times:'',

            };
        },
        methods: {
            clickSearch() {
                this.refreshEcharts(this.MonthForm);
            },
            /**
             * 查询所有员工
             * @returns {Promise<void>}
             */
            async queryStaffList(){
                const {data:res} = await this.$http.get('staff/allStafflist');
                if(res.code !== '200'){
                    return;
                }
                console.log(res)
                this.staffData = res.data;
            },
            async refreshEcharts() {
                const{data:res} = await this.$http.post('staff/queryStaffPresenceInfoByMonth',{
                    MonthForm:this.MonthForm,
                    id:this.selectedStaffId
                })
                console.log(res)
                if(res.code!=='200'){
                    return;
                }
                var arr = res.data;
                // 通过post回来的staff_id查找完整的staffData中符合的id 进而找出员工名字放在标题上。
                this.selectedStaffName = this.staffData.find(obj => {
                    console.log('员工id',this.selectedStaffId)
                    return obj.id === this.selectedStaffId
                }).name;

                // 通过filter统计 is_presence 为0 的次数，就是缺勤次数。
                var arr2 = res.data.filter(value => {
                        return value.is_presence === 0;
                })
                // 赋值次数给 data 里的数据 ，进行页面渲染。
                this.presence_times = arr2.length;
                console.log(this.presence_times)
                // console.log(this.selectedStaffName.name)
                for(var obj of arr){
                    obj.clock_time = dateFormat(obj.clock_time,'day')
                }
                console.log(arr)
                var option = {
                    title:{
                        text:this.selectedStaffName,
                        left:'center',
                        // top:'center'
                    },
                    legend: {
                        data: ["打卡时间", "打卡次数"],
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            crossStyle: {
                                color: "#999",
                            },
                        },
                    },

                    xAxis: {
                        type: "category",
                        data: arr.map((obj) => obj.clock_time),
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            // name: "打卡次数",
                            data: arr.map((obj) => obj.is_presence),
                            type: "line",
                        },
                    ],
                };
                this.sechart.setOption(option);
            },
        },
        mounted() {
            this.sechart = this.$echarts.init(document.getElementById("chart_div"));
            // this.refreshEcharts();
        },
        created() {
            this.queryStaffList();
        },
    };
</script>

<style lang="less" scoped>
    .block {
    }
    .demonstration {
        margin-right: 10px;
    }
    .el_btn {
        margin: 0px 10px;
    }
    .bgff {
        background-color: #fff;
    }
    .el-date-editor--monthrange.el-input, .el-date-editor--monthrange.el-input__inner {
        width: 400px;
    }
</style>